{extend name="./common/view"}

{block name="title"}
查课表
{/block}

{block name="body"}
<style type="text/css">
	.info{
		margin-left:7px; 
	}
	.hrTable{
		border-bottom: 1px solid #eee;
		height: 133px; 
	}
	.hrTable2{
		border-bottom: 1px solid #eee;
		height: 136px; 
	}
	.hrTable3{
		border-bottom: 1px solid #eee;
		height: 137px; 
	}
	.hrTable4{
		border-bottom: 1px solid #eee;
		height: 139px; 
	}
	.hrTable5{
                border-bottom: 1px solid #eee;
                height: 136px;
        }
	.layui-bg-gray{
		margin-bottom: 3px;
	}
	.nl{

	}
</style>
<center style="display: flex;justify-content:center;">
	<div class="layui-btn layui-btn-primary layui-btn-sm nl" onclick="descZC()"><</div>
	<div style="margin-top: 6px;margin-left: 20px;margin-right: 20px;">第<label id="zcS">{$zc}</label>周</div><input type="hidden" id="zc" value="{$zc}">
	<div class="layui-btn layui-btn-primary layui-btn-sm nl" onclick="addZC()">></div>
</center>
<hr class="layui-bg-gray">
 <div style="position: relative;">
 	<div class="hrTable"></div>
 	<div class="hrTable2"></div>
 	<div class="hrTable3"></div>
 	<div class="hrTable4"></div>
    <div class="hrTable5"></div>
    <div id="app"></div>
</div>

<script type="text/javascript">
	function tableStart(info){
		layer.closeAll();
		if(info[0] === null) {alert("无课表信息");return ;}
		console.log(info);
		var n = info.length;
		var html = "";
		for (var i = 0; i < n; i++) {
		html += '<div style="background: #eee;border-radius: 3px;position: absolute;width: calc(100% / 7);'+
		'top: '+((parseInt(info[i].kcsj.substring(1,3)) - 1)  * 68) + 'px;'+
		'height: '+((parseInt(info[i].kcsj.substring(3,5)) - parseInt(info[i].kcsj.substring(1,3)) ) * 130 )+'px;'+
		'left: calc(100% / 7 * '+(parseInt(info[i].kcsj[0]) - 1 ) + " + " + (parseInt(info[i].kcsj[0]) * 3)+'px);'+
		'">'+
			'<div>'+
				'<div style="text-align: center;word-break: break-all;">'+info[i].kcmc+'</div>'+
				'<div style="text-align: center;word-break: break-all;">'+info[i].jsmc+'</div>'+
			'</div>'+
	    '</div>';
		}
		$("#app").html(html);
	}
	function loadTable(zc = "") {
		loadmsg();
		if (zc !== "") zc = "/" + zc;
		$.ajax({                                      
	      type:"post",
	      url:ctx + "/funct/sw/table" + zc,  
	      dataType:"json",                      
	      success:function(data)
	      {
	          if (data.MESSAGE=="Yes") tableStart(data.data);
	          else errmsg('请求失败');
	      },
	      error:function()
	      {
	          layer.closeAll();
	          errmsg('请求失败');
	      }
	  });
	}
	function addZC() {
		var zc = parseInt($("#zc").val()) + 1;
		loadTable(zc);
		$("#zc").val(zc);
		$("#zcS").html(zc);
	}
	function descZC() {
		var zc = parseInt($("#zc").val()) - 1;
		if (zc<0) {return ;}
		loadTable(zc);
		$("#zc").val(zc);
		$("#zcS").html(zc);
	}
	window.onload=function(){loadTable();}
</script>

{/block}
<div style="background: #eee;border-radius: 3px;position: absolute;
	height: <?php echo ( (int)substr($value['kcsj'],3,4) - (int)substr($value['kcsj'],1,2) ) * 120 ?>px;
	top: <?php echo ((int)substr($value['kcsj'],1,2) - 1)  * 63 ?>px;
	left: calc(100% / 7 * <?php echo ((int)$value['kcsj'][0] - 1); ?> + <?php echo ((int)$value['kcsj'][0]*3); ?>px);
	width: calc(100% / 7);">
</div>
